<template>
  <div  >

    <div class="form-warp">
      <el-form :model="orderFrom" class="form">
        <el-form-item label="订单类型">
          <el-radio-group v-model="orderFrom.orderType">
            <el-radio :label="1">临时单</el-radio>
            <el-radio :label="2">预约单</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-form  :inline="true" :model="orderFrom" class="form">
        <el-form-item v-if="orderFrom.orderType===2" label="预约时间">
          <el-date-picker v-model="orderFrom.runtime" type="datetime" size="small" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="车型">
          <CarTypeSelect :value.sync="orderFrom.carTypeId"/>
        </el-form-item>
        <el-form-item label="温度">
          <div style="display: flex;justify-content: flex-start;">
            <el-input-number v-model="orderFrom.minOc" size="small" ></el-input-number>
            <span>-</span>
            <el-input-number v-model="orderFrom.maxOc" size="small" ></el-input-number>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div  style="padding: 10px 25px">
      <div style="display: flex;justify-content: center;padding: 10px 5px;background: #f56c6c;">
        <span style="flex: 1;color: white;font-size: 12px">取货人信息</span>
        <a class="button iconfont icon-zengjia" @click="showAddressDialog=true;searchParams.type=1;searchParams = Object.assign({}, searchParams, searchParams)"></a>
      </div>
      <UTable ref="mTable" :autoLoadData="false" :localData="orderFrom.placeofreceipts" :columns="placeofreceiptColumns" style="margin-top: 0px" />
    </div>
    <div  style="padding: 10px 25px">
      <div style="display: flex;justify-content: center;padding: 10px 5px;background: #f56c6c;">
        <span style="flex: 1;color: white;font-size: 12px">配送信息</span>
        <a class="button iconfont icon-zengjia" @click="showAddressDialog=true;searchParams.type=2;searchParams = Object.assign({}, searchParams, searchParams)"></a>
      </div>
      <Distribution :data="orderFrom.distributions" @addGoods="addGoods"/>
    </div>
    <div style="display: flexl;justify-content: flex-end;padding: 30px">
      <el-button type="danger"  style="width: 300px;float: right" @click="createorder">创建订单</el-button>
    </div>

    <el-dialog title="选择地址" :visible.sync="showAddressDialog">
      <UTable ref="addresTab" @onRowDblclick="onRowDBClick" :search-params="searchParams" :search-api="getAddressByType" :columns="addressColums" />
    </el-dialog>
    <el-dialog title="设置时间" :visible.sync="showTimeDialog" width="250px">
      <el-date-picker v-model="time" type="datetime" placeholder="选择日期时间" size="small" format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSetTime">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>

  import UTable from '@/components/UTable'
  import {getAddressByType} from '@/api/address'
  import {createDistributionOrder} from '@/api/order'
  import Distribution from './components/Distribution'
  import CarTypeSelect from '@/components/CarTypeSelect'
  export default {
    components:{
      UTable,Distribution,CarTypeSelect
    },
    data(){
      return {
        showAddressDialog:false,
        searchParams:{},
        getAddressByType:getAddressByType,
        orderFrom:{
          placeofreceipts:[],
          distributions:[]
        },
        time:'',
        currentAddress:null,
        showTimeDialog:false,
        addressColums:[
            { prop: 'name', label: '姓名' },
            { prop: 'phone', label: '联系电话'},
            { prop: 'urgentName', label: '紧急联系人'},
            { prop: 'urgentphone', label: '紧急联系人电话' },
            { prop: 'location', label: '地址'}
        ],
        placeofreceiptColumns: [
          { prop: 'name', label: '姓名' },
          { prop: 'phone', label: '联系电话'},
          { prop: 'urgentName', label: '紧急联系人'},
          { prop: 'urgentphone', label: '紧急联系人电话' },
          { prop: 'location', label: '地址'},
          {prop:'arriveTime',label:'到达时间'}
        ]
      }
    },
    computed: {
    },
    methods:{
      onSetTime(){
        this.currentAddress.arriveTime=this.$moment(this.time).format('YYYY-MM-DD HH:mm:ss')
        if(this.searchParams.type==1){
          if(this.orderFrom.placeofreceipts.length>0){
            this.orderFrom.placeofreceipts[0]=this.currentAddress;
          }else {
            this.orderFrom.placeofreceipts.push(this.currentAddress);
          }
        }else {
          this.currentAddress.goodsList=[]
          this.orderFrom.distributions.push(this.currentAddress)
        }
        this.showTimeDialog=false
      },
      addGoods(index){
        var oldDists=this.orderFrom.distributions
        oldDists[index].goodsList.push({ goodsName:'',qty:0,unitname:''})
        this.$set(this.orderFrom.distributions, oldDists)
      },
      onRowDBClick(row,index){
          this.currentAddress=row
          this.showAddressDialog=false
          this.showTimeDialog=true

      },
      createorder(){
        var params={
          orders:JSON.stringify(this.orderFrom)
        }
        createDistributionOrder(params).then(res=>{

        })

      }
    }
  }
</script>
<style>
  .el-table__expanded-cell{
    background: #ccc !important;
    padding: 20px !important;
  }
</style>
<style scoped>
  .e{
    color: red;
  }
  .form{
    padding: 15px 15px 0px 15px;
  }
  .data-item{
    margin-right: 15px;
  }
  .data-item span{
    color: #2d2f33;
    font-size: 12px;
  }
  .data-item .title{
    color: #001528;
    margin-right: 8px;
    font-size: 16px;
  }
  .form-warp{
    border: 1px solid #e0e0e0;
    margin:10px 30px;
  }
  .form-tips{
    display:-webkit-box;
    background: #e6e6e6;
    padding: 10px 8px;
    color: #c0c4cc;
    font-size: 12px;
  }
  .flies-item{
    margin: 15px;
    display: grid;
    justify-items: center;
  }
  .flies-item .title{
    padding: 5px;
  }
  .button{
    font-size: 14px;
    color: white;

  }
</style>
